<template>
  <div style="margin-top: 10px">
    <el-table
      v-show="!showOrfalse"
      :data="tableData"
      border
      id="el-table-class"
      stripe
      style="width: 100%"
      :header-cell-style="{
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#333e57',
        backgroundColor: '#f5f7fa',
        height: '40px',
      }"
    >
      <!-- <el-table-column label="指导书" width="80" align="left">
      <template slot-scope="{ row }">
        <i
          v-if="row.instruction === 'PDF'"
          class="el-icon-document"
          style="color: red; font-size: 18px"
        ></i>
      </template>
    </el-table-column> -->

      <el-table-column
        prop="mo_type"
        label="类别"
        width="80"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="sales_order_date"
        label="订单日期"
        width="100"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="release_date"
        label="排产日期"
        width="100"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="sales_expected_time"
        label="客户交期"
        width="100"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="end_date"
        label="排产交期"
        width="100"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="sales_order_no"
        label="订单编号"
        width="200"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="material_code"
        label="产品编号"
        width=""
        align="left"
      ></el-table-column>

      <el-table-column
        label="生产进度"
        width="500"
        align="left"
        :cell-style="{ height: '100%' }"
      >
        <template slot-scope="{ row }">
          <el-link
            style="margin-top: -40px"
            type="primary"
            @click="changeShowOrFalse(row.mo_detail_code)"
            >详情
          </el-link>
          <div class="progress-container">
            <div
              v-for="(item, index) in row.process_list"
              :key="index"
              :style="getProgressStyle(item)"
            >
              <span class="progress-label">{{ item.process_name }}</span>

              <span class="progress-value">{{
                item.total_report_quantity_good +
                "/" +
                item.total_task_quantity +
                "/" +
                item.percentage
              }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="input_material_code"
        label="毛坏编号"
        width=""
        align="left"
      ></el-table-column>
      <el-table-column
        prop="estimated_input_quantity"
        label="毛坏数量"
        width="100"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="task_quantity"
        label="计划产品成品"
        width="150"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="sales_order_qty"
        label="订单数量"
        width="100"
        align="left"
      ></el-table-column>
      <el-table-column
        prop="mo_detail_code"
        label="排产单号"
        width="200"
        align="left"
      ></el-table-column>
    </el-table>
    <div v-if="showOrfalse">
      <el-page-header @back="goBack()" content="详情页面"> </el-page-header>
      <el-form
        :model="order"
        label-width="120px"
        label-position="left"
        style="padding: 10px"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">订单编号</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.order_number"
                  placeholder="请输入"
                  disabled
                  class="custom-input"
                >
                </el-input> -->
                <div class="label-cell">{{ order.order_number }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">产品编号</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.product_code"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                >
                </el-input> -->
                <div class="label-cell">{{ order.product_code }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">订单日期</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.order_date"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                >
                </el-input> -->
                <div class="label-cell">{{ order.order_date }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">应交日期</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.transaction_date"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                ></el-input> -->
                <div class="label-cell">{{ order.transaction_date }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">订单数量</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.order_quantity"
                  placeholder="请输入"
                  disabled
                  class="custom-input"
                >
                </el-input> -->
                <div class="label-cell">{{ order.order_quantity }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">库存数量</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.inventory_quantity"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                ></el-input> -->
                <div class="label-cell">{{ order.inventory_quantity }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">生产方式</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.production_method"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                ></el-input> -->
                <div class="label-cell">{{ order.production_method }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">订单次数</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.transaction_count"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                ></el-input> -->
                <div class="label-cell">{{ order.transaction_count }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">公差</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.tolerance"
                  placeholder="请输入"
                  disabled
                  class="custom-input"
                >
                </el-input> -->
                <div class="label-cell">{{ order.tolerance }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">客户性能</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.customer_performance"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                ></el-input> -->
                <div class="label-cell">{{ order.customer_performance }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">镀层</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.cladding_material"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                ></el-input> -->
                <div class="label-cell">{{ order.cladding_material }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">盐雾</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.salt_mist"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                >
                </el-input> -->
                <div class="label-cell">{{ order.salt_mist }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">充磁</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.magnetizing_method"
                  placeholder="请输入"
                  disabled
                  class="custom-input"
                >
                </el-input> -->
                <div class="label-cell">{{ order.magnetizing_method }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">加垫片</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.add_shim"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                >
                </el-input> -->
                <div class="label-cell">{{ order.add_shim }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">标记</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.tags"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                >
                </el-input> -->
                <div class="label-cell">{{ order.tags }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">表磁</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.superficial_magnetic_field"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                ></el-input> -->
                <div class="label-cell">
                  {{ order.superficial_magnetic_field }}
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">备品</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.spare_parts"
                  placeholder="请输入"
                  disabled
                  class="custom-input"
                >
                </el-input> -->
                <div class="label-cell">{{ order.spare_parts }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">其他</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.others"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                >
                </el-input> -->
                <div class="label-cell">{{ order.others }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">状态</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <!-- <el-input
                  v-model="order.status"
                  disabled
                  class="custom-input"
                  placeholder="请输入"
                >
                </el-input> -->
                <div class="label-cell">{{ order.status }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-row :gutter="20" class="input-row">
              <el-col :span="6">
                <div class="label-cell">指导书</div>
              </el-col>
              <el-col :span="18" style="position: relative">
                <div
                  style="
                    height: 24px;
                    width: 1px;
                    background: #dcdfe6;
                    position: absolute;
                    top: 6px;
                    left: -10px;
                  "
                ></div>
                <div class="label-cell">{{ order.status }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <div style="height: 40px"></div>
      <!-- <el-table
        :data="materialData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'bold',
          textAlign: 'center',
          color: '#333e57',
          padding: '6px',
          backgroundColor: '#f5f7fa',
        }"
        :cell-style="{ textAlign: 'center', padding: '5px' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="material_code"
          label="物料编号"
        ></el-table-column>
        <el-table-column
          prop="material_name"
          label="物料名称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="material_specification"
          label="物料规格"
        ></el-table-column>
        <el-table-column
          prop="material_usage"
          label="用量"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="material_order_usage"
          label="订单用量"
          width="200"
        ></el-table-column>
        <el-table-column prop="material_remark" label="备注"></el-table-column>
      </el-table> -->
      <!-- <div style="height: 10px"></div> -->
      <!-- <el-table
        :data="purchaseData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'bold',
          textAlign: 'center',
          color: '#333e57',
          padding: '6px',
          backgroundColor: '#f5f7fa',
        }"
        :cell-style="{ textAlign: 'center', padding: '5px' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="purchase_code"
          label="物料编号"
          width=""
        ></el-table-column>
        <el-table-column
          prop="purchase_name"
          label="物料名称"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="purchase_specification"
          label="物料规格"
          width=""
        ></el-table-column>
        <el-table-column
          prop="purchase_unit"
          label="单位"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="purchase_quantity"
          label="需求采购数量"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="purchase_requirement_description"
          label="要求说明"
          width="500"
        ></el-table-column>
        <el-table-column
          prop="purchase_status"
          label="状态"
          width="120"
        ></el-table-column>
      </el-table> -->
      <!-- <div style="height: 10px"></div> -->
      <el-table
        :data="productData"
        border
        stripe
        id="el-table-class1"
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'bold',
          textAlign: 'center',
          color: '#333e57',
          padding: '6px',
          backgroundColor: '#f5f7fa',
        }"
      >
        <el-table-column
          prop="process_index"
          label="序号"
          width="80"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="process_name"
          label="工序"
          width="100"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="input_material_code"
          label="材料规格"
          width=""
          align="left"
        ></el-table-column>
        <el-table-column
          prop="estimated_input_quantity"
          label="投入数量"
          width="120"
          align="left"
        >
        </el-table-column>
        <el-table-column
          prop="output_material_code"
          label="加工规格"
          width=""
          align="left"
        ></el-table-column>
        <el-table-column
          prop="task_quantity"
          label="产出数量"
          width="120"
          align="left"
        >
        </el-table-column>
        <el-table-column
          prop="mo_req"
          label="要求"
          width=""
          align="left"
        ></el-table-column>
        <el-table-column
          prop="start_date"
          label="开始时间"
          width="140"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="end_date"
          label="完成时间"
          width="140"
          align="left"
        ></el-table-column>

        <el-table-column label="派工情况" width="410px">
          <template slot-scope="{ row }">
            <el-table
              v-if="row.paiGong"
              id="paigong"
              :data="row.paiGong"
              border
              stripe
              size="mini"
              :header-cell-style="{
                color: '#333e57',
                backgroundColor: '#f5f7fa',
              }"
              :cell-style="{
                fontSize: '12px',
              }"
            >
              <el-table-column
                prop="f_creatortime"
                label="日期"
                width="120"
                align="left"
              ></el-table-column>
              <el-table-column
                prop="input_quantity"
                label="发出数量"
                width="80"
                align="left"
              >
              </el-table-column>
              <el-table-column
                prop="work_dept_name"
                label="生产车间"
                width=""
                align="left"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="收货情况" width="300">
          <template slot-scope="{ row }">
            <el-table
              v-if="row.shouHuo"
              :data="row.shouHuo"
              id="shouhuo"
              border
              stripe
              size="mini"
              :header-cell-style="{
                color: '#333e57',
                backgroundColor: '#f5f7fa',
              }"
              :cell-style="{
                fontSize: '12px',
              }"
            >
              <el-table-column
                prop="report_time"
                label="日期"
                width="120"
                align="left"
              >
              </el-table-column>
              <el-table-column
                prop="quantity"
                label="数量"
                width="60"
                align="left"
              >
              </el-table-column>
              <el-table-column
                prop="qs_type"
                label="品质"
                width=""
                align="left"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOrfalse: false,
      order: {
        // 订单编号
        order_number: "",
        // 订单数量
        order_quantity: "",
        // 公差
        tolerance: "",
        // 充磁
        magnetizing_method: "",
        // 备品
        spare_parts: "",
        // 产品编号
        product_code: "",
        // 库存数量
        inventory_quantity: "",
        // 客户性能
        customer_performance: "",
        // 加垫片
        add_shim: "",
        // 其他
        others: "",
        // 订单日期
        order_date: "",
        // 生产方式
        production_method: "",
        // 镀层
        cladding_material: "",
        // 标记
        tags: "",
        // 状态
        status: "",
        // 应交日期
        transaction_date: "",
        // 订单次数
        transaction_count: "",
        // 盐雾
        salt_mist: "",
        // 表磁
        superficial_magnetic_field: "",
      },
      tableData: [
        // {
        //   instruction: "PDF", // 指导书
        //   category: "生产", // 类别
        //   order_date: "01-09", // 订单日期
        //   scheduling_date: "01-09", // 排产日期
        //   customer_due_date: "02-08", // 客户交期
        //   scheduled_due_date: "03-30", // 排产交期
        //   order_number: "PO2025010913019", // 订单编号
        //   scheduling_number: "PO2025010913019", // 排产编号
        //   product_number: "N28-L63.8*15*3.5+D3.5/D6.6/2*R1.5-NCN48H", // 产品编号
        //   production_progress: {
        //     切片: "0/366",
        //     沉孔: "0/1098",
        //     电镀: "0/1098",
        //     包装: "0/1098",
        //   },
        //   raw_material_number: "N28-L64.2*48*36", // 毛胚编号
        //   raw_material_quantity: 122, // 毛胚数量
        //   planned_finished_products: 3278, // 计划产品成品
        //   order_quantity: 6068.0, // 订单数量
        // },
        // {
        //   instruction: "", // 指导书
        //   category: "生产", // 类别
        //   order_date: "03-19", // 订单日期
        //   scheduling_date: "03-19", // 排产日期
        //   customer_due_date: "03-26", // 客户交期
        //   scheduled_due_date: "03-24", // 排产交期
        //   order_number: "PO20250319015", // 订单编号
        //   scheduling_number: "PO20250319015", // 排产编号
        //   product_number: "N33-L23*12*4.5-ZN", // 产品编号
        //   production_progress: {
        //     电镀: "123/980",
        //     包装: "0/980",
        //   },
        //   raw_material_number: "N35B-L64.2*48*36", // 毛胚编号
        //   raw_material_quantity: 14, // 毛胚数量
        //   planned_finished_products: 980, // 计划产品成品
        //   order_quantity: 1000.0, // 订单数量
        // },
        // {
        //   instruction: "PDF", // 指导书
        //   category: "生产", // 类别
        //   order_date: "03-12", // 订单日期
        //   scheduling_date: "03-12", // 排产日期
        //   customer_due_date: "03-19", // 客户交期
        //   scheduled_due_date: "03-18", // 排产交期
        //   order_number: "JS02066-2851", // 订单编号
        //   scheduling_number: "JS02066-2851", // 排产编号
        //   product_number: "FSDO-N52-17D-HCT1外N+TP0.5-ZN", // 产品编号
        //   production_progress: {
        //     激光: "0/76545",
        //     电镀: "0/76545",
        //     包装: "1232/2502",
        //   },
        //   raw_material_number: "N52-L64*54*34", // 毛胚编号
        //   raw_material_quantity: 35, // 毛胚数量
        //   planned_finished_products: 4500, // 计划产品成品
        //   order_quantity: 5400.0, // 订单数量
        // },
        // {
        //   instruction: "", // 指导书
        //   category: "生产", // 类别
        //   order_date: "03-15", // 订单日期
        //   scheduling_date: "03-15", // 排产日期
        //   customer_due_date: "03-22", // 客户交期
        //   scheduled_due_date: "03-21", // 排产交期
        //   order_number: "NPDA-2503140005", // 订单编号
        //   scheduling_number: "NPDA-2503140005", // 排产编号
        //   product_number: "N35-D2*8-BTX", // 产品编号
        //   production_progress: {
        //     无心磨: "5348/5459",
        //     切片: "21019/21836",
        //     电镀: "12398/21836",
        //     包装: "0/21836",
        //   },
        //   raw_material_number: "N38-D3*36/Z", // 毛胚编号
        //   raw_material_quantity: 5459, // 毛胚数量
        //   planned_finished_products: 21836, // 计划产品成品
        //   order_quantity: 70000.0, // 订单数量
        // },
        // {
        //   instruction: "", // 指导书
        //   category: "生产", // 类别
        //   order_date: "03-17", // 订单日期
        //   scheduling_date: "03-17", // 排产日期
        //   customer_due_date: "03-24", // 客户交期
        //   scheduled_due_date: "03-23", // 排产交期
        //   order_number: "PO5228030", // 订单编号
        //   scheduling_number: "PO5228030", // 排产编号
        //   product_number: "N35B-D15*3-ZN", // 产品编号
        //   production_progress: {
        //     无心磨: "676/679",
        //     电镀: "1213/9506",
        //     包装: "0/9506",
        //   },
        //   raw_material_number: "N38-D16.3*47.5/Z", // 毛胚编号
        //   raw_material_quantity: 679, // 毛胚数量
        //   planned_finished_products: 9500, // 计划产品成品
        //   order_quantity: 9110.0, // 订单数量
        // },
        // {
        //   instruction: "", // 指导书
        //   category: "生产", // 类别
        //   order_date: "03-14", // 订单日期
        //   scheduling_date: "03-14", // 排产日期
        //   customer_due_date: "03-20", // 客户交期
        //   scheduled_due_date: "03-23", // 排产交期
        //   order_number: "QSPO-2025031400013", // 订单编号
        //   scheduling_number: "QSPO-2025031400013", // 排产编号
        //   product_number: "N52-D8*1.4-NCN", // 产品编号
        //   production_progress: {
        //     切片: "55071/55005",
        //     电镀: "12321/55005",
        //   },
        //   raw_material_number: "N52-D8*34", // 毛胚编号
        //   raw_material_quantity: 2895, // 毛胚数量
        //   planned_finished_products: 55000, // 计划产品成品
        //   order_quantity: 30000.0, // 订单数量
        // },
      ],
      materialData: [
        {
          material_serial_number: 1, // 序号
          material_code: "N52-R27*R22*9.92*4.95*1.65/W-ZN", // 物料编号
          material_name: "磁铁", // 物料名称
          material_specification: "R27*R22*9.92*4.95*1.65/W", // 物料规格
          material_usage: 7.0, // 用量
          material_order_usage: 140000.0, // 订单用量
          material_remark: "", // 备注
        },
        {
          material_serial_number: 2, // 序号
          material_code: "P-TP-D54*0.8+D44/W148°-ZN", // 物料编号
          material_name: "铁片", // 物料名称
          material_specification: "TP-D54*0.8+D44/W148°", // 物料规格
          material_usage: 1.0, // 用量
          material_order_usage: 20000.0, // 订单用量
          material_remark: "", // 备注
        },
        {
          material_serial_number: 3, // 序号
          material_code: "P-JQ-D60*1.2+D41-W", // 物料编号
          material_name: "胶圈", // 物料名称
          material_specification: "60*41*1.2", // 物料规格
          material_usage: 1.0, // 用量
          material_order_usage: 20000.0, // 订单用量
          material_remark: "", // 备注
        },
      ],
      purchaseData: [
        {
          purchase_serial_number: 1, // 序号
          purchase_code: "P-TP-D54*0.8+D44/W148°-ZN", // 物料编码
          purchase_name: "铁片", // 物料名称
          purchase_specification: "TP-D54*0.8+D44/W148°", // 物料规格
          purchase_unit: "片", // 单位
          purchase_quantity: 20000.0, // 需求采购数量
          purchase_requirement_description:
            "公差:按图纸 键层:锌，无线充倒角，过滑粉 两极充磁，外N内S 加垫片:是", // 要求说明
          purchase_status: "已采购", // 状态
        },
      ],
      productData: [
        {
          product_serial_number: 1, // 序号
          product_process: "切片", // 工序
          product_material_specification: "N52-L64*54*34", // 材料规格
          product_input_quantity: 140, // 投入数量
          product_processing_specification: "N52-L64*53.5*1.65", // 加工规格
          product_output_quantity: 2380, // 产出数量
          product_requirement: "激光片 单拼 可以不磨", // 要求
          product_start_time: "2025-03-15", // 开始时间
          product_completion_time: "2025-03-15", // 完成时间
          product_dispatch_details: [
            // 派工情况
            {
              product_date: "03-20 18:06", // 日期
              product_sent_quantity: 140, // 发出数量
              product_processor: "1本部切片", // 加工商
              product_receiving_details: [
                // 收货情况
                {
                  product_date: "03-18 08:24", // 日期
                  product_passed: 701, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 0, // 废品
                },
                {
                  product_date: "03-18 16:42", // 日期
                  product_passed: 1035, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 0, // 废品
                },
                {
                  product_date: "03-19 18:25", // 日期
                  product_passed: 0, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 28, // 废品
                },
                {
                  product_date: "03-18 19:59", // 日期
                  product_passed: 616, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 0, // 废品
                },
              ],
            },
          ],
        },
        {
          product_serial_number: 2, // 序号
          product_process: "激光", // 工序
          product_material_specification: "N52-L64*53.5*1.65", // 材料规格
          product_input_quantity: 2380, // 投入数量
          product_processing_specification: "N52-R27*R22*9.92*4.95*1.65/W-ZN", // 加工规格
          product_output_quantity: 154700, // 产出数量
          product_requirement: "1出6片 切同R25 黑片弧宽做9.8", // 要求
          product_start_time: "2025-03-15", // 开始时间
          product_completion_time: "2025-03-17", // 完成时间
          product_dispatch_details: [
            // 派工情况
            {
              product_date: "03-20 18:06", // 日期
              product_sent_quantity: 701, // 发出数量
              product_processor: "1本部异形", // 加工商
              product_receiving_details: [
                // 收货情况
                {
                  product_date: "03-20 18:06", // 日期
                  product_passed: 0, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 455, // 废品
                },
                {
                  product_date: "03-19 20:33", // 日期
                  product_passed: 45110, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 0, // 废品
                },
              ],
            },
            {
              product_date: "03-20 18:06", // 日期
              product_sent_quantity: 1035, // 发出数量
              product_processor: "1本部异形", // 加工商
              product_receiving_details: [
                // 收货情况
                {
                  product_date: "03-21 10:58", // 日期
                  product_passed: 0, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 672, // 废品
                },
                {
                  product_date: "03-19 20:34", // 日期
                  product_passed: 31235, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 0, // 废品
                },
                {
                  product_date: "03-21 19:28", // 日期
                  product_passed: 35368, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 0, // 废品
                },
              ],
            },
            {
              product_date: "03-20 18:06", // 日期
              product_sent_quantity: 616, // 发出数量
              product_processor: "1本部异形", // 加工商
              product_receiving_details: [
                // 收货情况
                {
                  product_date: "03-21 10:38", // 日期
                  product_passed: 15510, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 0, // 废品
                },
                {
                  product_date: "03-21 10:58", // 日期
                  product_passed: 0, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 548, // 废品
                },
                {
                  product_date: "03-21 20:32", // 日期
                  product_passed: 23982, // 正品
                  product_defective: 0, // 不良品
                  product_scrap: 0, // 废品
                },
              ],
            },
          ],
        },
      ],
    };
  },
  async created() {
    await Promise.all([this.getData1(), this.getData2()]).then(
      ([result1, result2]) => {
        console.log("所有请求完成：");
        console.log("数据:", result1, result2);
        this.tableData = result1.map((item) => {
          let matchedProcesses = result2.filter((p) => {
            return p.mo_detail_code === item.mo_detail_code;
          });
          let process = matchedProcesses.map((ele) => {
            let percentage = "0%";
            if (
              ele.total_report_quantity_good + ele.total_report_quantity_bad ===
              0
            ) {
              percentage = "0%";
            } else {
              percentage =
                (ele.total_report_quantity_good * 100) /
                (ele.total_report_quantity_good +
                  ele.total_report_quantity_bad);
              percentage = parseInt(percentage) + "%";
            }

            return {
              ...ele,
              percentage,
            };
          });
          // console.log(JSON.stringify(process));
          return {
            ...item,
            process_list: process,
          };
        });
        // console.log(this.tableData);
      }
    );
    // this.$nextTick(() => {});
  },
  methods: {
    getData1() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "jhcy.main.db.produce.shengchanjindubaobiao",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData2() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "jhcy.main.db.produce.shengchangongxu",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData3(code) {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode("jhcy.main.db.produce.selectDeatil", {
          code,
        }).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData4(code) {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "jhcy.main.db.produce.selectpangongqingkuang",
          { code }
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData5(code) {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "jhcy.main.db.produce.selectshouhuoqingkuang",
          { code }
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    goBack() {
      this.showOrfalse = !this.showOrfalse;
    },
    async changeShowOrFalse(code) {
      await Promise.all([
        this.getData3(code),
        this.getData4(code),
        this.getData5(code),
      ]).then(([result3, result4, result5]) => {
        console.log("所有请求完成：");
        console.log("数据:", result3, result4, result5);
        if (result3.length >= 1)
          this.order = {
            // 订单编号
            order_number: result3[0].sales_order_line || "",
            // 订单数量
            order_quantity: result3[0].sales_order_qty || "",
            // 公差
            tolerance: result3[0].public_errand || "",
            // 充磁
            magnetizing_method: result3[0].magnetizing || "",
            // 备品
            spare_parts: result3[0].material_parts || "",
            // 产品编号
            product_code: result3[0].material_code || "",
            // 库存数量
            inventory_quantity: result3[0].real_time_stock || "",
            // 客户性能
            customer_performance: result3[0].performance_c || "",
            // 加垫片
            add_shim: result3[0].add_shimming || "",
            // 其他
            others: result3[0].remark || "",
            // 订单日期
            order_date: result3[0].sales_order_date || "",
            // 生产方式
            production_method: result3[0].product_method || "",
            // 镀层
            cladding_material: result3[0].surface_t || "",
            // 标记
            tags: result3[0].material_mark || "",
            // 状态
            status: result3[0].mo_status || "",
            // 应交日期
            transaction_date: result3[0].sales_expected_time || "",
            // 订单次数
            transaction_count: result3[0].delay || "",
            // 盐雾
            salt_mist: result3[0].salt_m || "",
            // 表磁
            superficial_magnetic_field: result3[0].magnetic_t || "",
          };
        this.productData = result3.map((item) => {
          let shouHuo = result5.filter(
            (p) => p.mo_task_code === item.mo_task_code
          );
          if (shouHuo.length == 0) shouHuo = "";
          let paiGong = result4.filter(
            (p) => p.mo_task_code === item.mo_task_code
          );
          if (paiGong.length == 0) paiGong = "";
          return {
            ...item,
            paiGong,
            shouHuo,
          };
        });
        console.log(this.productData);
        this.showOrfalse = !this.showOrfalse;
      });
    },
    getProgressStyle(progress) {
      // const [current, total] = progress.split("/").map(Number);
      if (!progress)
        return { backgroundColor: "transparent", padding: "2px 5px" };

      const percentage =
        (progress.total_report_quantity_good / progress.total_task_quantity) * 100;
      let color = "gray"; // 默认灰色 (0%)

      if (percentage >= 99) color = "rgb(0,255,0)";
      else if (percentage >= 80) color = "rgb(238,255,51)";
      else if (percentage < 80 && 0 < percentage) color = "rgb(255,0,0)";
      else if (percentage === 0) color = "#ccc";

      return {
        marginTop: "1px",
        backgroundColor: color,
        padding: "4px 8px",
        borderRadius: "4px",
        color: "#333",
        display: "inline-block",
        marginRight: "5px",
        textAlign: "center",
        minWidth: "80px",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
#el-table-class td > .cell {
  margin-top: 2px;
  padding-left: 10px;
  height: auto !important;
  line-height: 100% !important;
  // line-height: auto !important;
}

#el-table-class td {
  height: auto !important;
}

#el-table-class1 td > .cell {
  margin: 2px;
  padding-left: 12px;
  padding-right: 12px;
  height: auto !important;
  line-height: 100% !important;
  // line-height: auto !important;
}

#el-table-class1 .cell > div {
  padding: 0 !important;
}

#el-table-class1 td {
  height: auto !important;
}

#shouhuo td {
  height: 20px !important;
}

#shouhuo .cell > div {
  padding: 0 !important;
}

#shouhuo td > .cell {
  padding-left: 6px;
  height: 20px !important;
  line-height: 20px !important;
  // line-height: auto !important;
}

#paigong td {
  height: 20px !important;
}

#paigong .cell > div {
  padding: 0 !important;
}

#paigong td > .cell {
  padding-left: 6px;
  height: 20px !important;
  line-height: 20px !important;
  // line-height: auto !important;
}

.input-row {
  background: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #d8dde8;
  margin: 5px 0px;
}

.label-cell {
  height: 36px;
  line-height: 36px;
}

.custom-input :deep(.el-input__inner) {
  border: none;
  box-shadow: none;
  padding-left: 0px;
}

:deep(.el-input__inner) {
  height: 36px !important;
  line-height: 36px !important;
}

>>> .el-table thead {
  background-color: #f0f0f0 !important;
  /* 灰色背景 */
}

>>> .el-table thead th {
  color: #000 !important;
  /* 黑色文字 */
  font-weight: bold !important;
  /* 粗体 */
  text-align: center;
}

>>> .el-table--enable-row-transition .el-table__body td.el-table__cell {
  padding: 0 !important;
}

>>> .el-table__cell {
  padding: 0 !important;
}

/* 让 progress-container 控制行高 */
.progress-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 50px;
  /* 这里控制行高 */
  line-height: 1.5;
}

/* 让每个进度项按块展示 */
.progress-container div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  border-radius: 4px;
  min-width: 60px;
}

.progress-label {
  font-size: 14px;
  font-weight: bold;
  display: block;
}

.progress-value {
  font-size: 12px;
  display: block;
}
</style>
